<template>
  <div class="app-container">
    <h2>变量 (variables)</h2>
    <div class="test-button-fill">fill按钮</div>
    <div class="block"></div>
    <div class="test-button-full">full按钮</div>

    <h2>混合 (mixins)</h2>
    <div class="test-p-wrap">
      <p class="test-p-ellipsis">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <div class="block"></div>
      <p class="test-p-ellipsisMultiline">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <div class="block"></div>
      <div class="test-scrollBar">
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'Sass',
})
export default class extends Vue {}
</script>

<style lang="scss">
.block {
  width: 20px;
  height: 20px;
}

h2 {
  margin: 20px 0;
  &:first-child {
    margin-top: 0;
  }
}

$button-height: 40px;

.test-button {
  height: $button-height;
  border-radius: $button-height;
  line-height: $button-height - 1px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  &:hover{
    box-shadow: 0 0 20px 10px rgba(136, 136, 136, 0.1);
  }
}

.test-button-fill {
  @extend .test-button;
  border: 1px solid #42b983;
  color: #42b983;
  background-color: #FFF;
}

.test-button-full {
  @extend .test-button;
  color: #FFF;
  background-color: #42b983;
}

.test-p-wrap {
  width: 200px;
  .test-p-ellipsis {
    @include ellipsis;
    color: gray;
  }
  .test-p-ellipsisMultiline {
    @include ellipsisMultiline(2);
    color: brown;
  }
  .test-scrollBar {
    @include scrollBar;
    height: 50px;
    overflow: auto;
  }
}

</style>
